<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: LV
  Date: 2016/7/19
  Time: 18:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style>
        .num_error{  right:0.5rem; top:0; color:#cb1448;}
    </style>
    <title>设置店铺Logo</title>
    <script src="${ctx}/assets/public_skin/js/lrz/dist/lrz.all.bundle.js" type="text/javascript"></script>
    <script>
        function submit_form() {
            $("#product_form").submit();
        }
    </script>
</head>
<body>
<%--<header>--%>
<%--<h1>发布商品</h1>--%>
<%--<a href="javascript:;"></a>--%>
<%--</header>--%>
<article class="viewports">
    <form:form modelAttribute="WxShopModel" action="${ctx}/modify/shop_logo" method="post" id="product_form">
        <ul class="plr20 lh1-5">
            <li class="mb10">
                <div class="c8">
                    <div class="odr2 plr10 mt20 b-ffffff">
                        <div class="layout-box">
                            <span>店铺logo：</span>
                            <div class="box-col">
                                <div id="filelist"></div>
                                <ul class="upload_A ptb20">
                                    <li class="ir l mr10" id="">
                                        <input id="myfile" type="file" style="display:none"/>
                                        <a  href="javascript:document.getElementById('myfile').click()"></a>

                                        <div class="">
                                            <div class="ith_img usernane_img160" id="upbtn"><span class="bg_span"></span></div>
                                            <i class="i_colse r100">&times;</i>
                                        </div>
                                        <span id="user-name-label"></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <c:if test="${error==1}">
                        <span class="num_error">图片不能为空</span>
                    </c:if>
                </div>
            </li>
        </ul>

    </form:form>
    <div class="tac pt20">
        <div class="pb30">
            <button class="b-ffaa3b cf ptb30 w fs30" onclick="submit_form()">保存</button>
        </div>
    </div>
</article>
<script type="text/javascript">
    document.querySelector('#myfile').addEventListener('change', function () {
        lrz(this.files[0], {
            width: 800
        })

                .then(function (rst) {

//                    alert(rst.base64);
//                    document.querySelector("#filelist").appendChild("<img src="+rst.base64+" />");
                    $("#upbtn").html('<span class="bg_span" style=" background-image:url(' + rst.base64 + ')"></span>');

//                    $("#upbtn").before("<li class='ir'><img src="+rst.base64+" height='95px' /></li>");

                    // 额外添加参数
                    rst.formData.append('fileLen', rst.fileLen);

                    $.ajax({
                        url: '/file_upload', // 这个地址做了跨域处理，可以用于实际调试
                        data: {img: rst.base64},
                        type: 'POST',
                        success: function (data) {
//                            var r = JSON.stringify(data);
//                            alert(r);
//                            alert(r.code);
                            if (data.code == 0) {
                                $("#filelist").append('<input type="hidden" id="shopLogo" name="shopLogo" value="' + data.url + '" pn="' + rst.origin.name + '"/>')
                            }

//                            alert(JSON.stringify(data));
                        }
                    });


                    // 处理成功会执行
                    console.log(rst);
                })
                .catch(function (err) {
                    // 处理失败会执行
//                    alert("err");
                })
                .always(function () {
                    // 不管是成功失败，都会执行
//                    alert("always");
                });
    });
    /*$(function(){
     $(".i_colse").bind("click",function(){
     var pn = $(this).parent().parent().attr("pn");
     alert(pn);
     })
     })*/

    function del(obj){

        var pn = $(obj).parent().parent().attr("pn");
        $(obj).parent().parent().remove();
        $("#filelist >input").each(function(){
            var cpn = $(this).attr("pn");
//            alert(cpn);
            if(cpn==pn){
                $(this).remove();
            }
        })
//        alert(pn);
    }
</script>
</body>
</html>
